import React, { useEffect } from 'react'
import { Button, Checkbox, Form, Input, Card, message } from 'antd';
import { useNavigate, useParams } from 'react-router-dom';
import style from '../index.module.css'

// 01、引入提交医院数据请求
//02、//修改医院时，获取原医院设置请求，引入请求接口
import {
    addHospitalRequest,
    getIdHospitalRequest,
    UpHosSetFromRequest
} from '@api/hospital/hospitalSet'

//引入类型定义
import { addHospitalParamType } from '@api/hospital/model/hospitalSetType'


export default function AddOrUpDataHos() {
    // Form.useForm()是一个值时一个数组的组件，实例化一个from从组件上解构，给表单绑定这个from，
    const [form] = Form.useForm()
    // console.log(Form.useForm());
    // console.log(form);


    //这里拿到点击修改时的id,使用useParams拿到传参
    //拿到id就写请求接口，拿到对应id的数据
    const { id } = useParams()
    // console.log(id,'id');

    const navigate = useNavigate()

    //页面刷新时，渲染修改的原始数据
    //因为时复用组件，要判断时点添加还是修改进来，  修改（包含了id）
    useEffect(() => {
        //通过有无携带id（判断点击哪个）
        if (id) {
            const getHosDetail = async () => {
                //发送请求
                const re = await getIdHospitalRequest(id)
                //获取到对应id的数据
                // console.log(re);
                //把数据展示到表单里
                //这里要使用表单的api-form.setFieldsValue（先创建from实例）
                //form.setFieldsValue会把一个对象值设置给表单，这里拿到的re就是一个对象，setFieldsValue会一一对应填充
                form.setFieldsValue(re)
            }
            getHosDetail();
        }
    })


    //1、提交医院数据请求(更新和添加复用组件，通过条件判断函数是走哪个)
    const addHospitalHandle = async (FieldValue: addHospitalParamType) => {

        if (id) {
            //如果由id则修改
            await UpHosSetFromRequest({
                //原数据缺了一个id，所以...合并传入
                ...FieldValue,
                id
            })
            message.success('医院数据修改成功')
        } else {
            //发送post请求
            await addHospitalRequest(FieldValue)
            message.success('医院数据添加成功')
        }

        //添加完数据后返回设置
        navigate('/syt/hospital/hospitalset')
    }

    //点击返回按钮返回设置
    const addBackHandle = () => {
        navigate(-1)
    }

    return (
        <Card>
            <Form
                form={form}
                name="basic"
                labelCol={{ span: 3 }}
                wrapperCol={{ span: 18 }}
                initialValues={{ remember: true }}
                autoComplete="off"
                onFinish={addHospitalHandle}
            >
                <Form.Item
                    label="医院名称"
                    name="hosname"
                >
                    <Input />
                </Form.Item>

                <Form.Item
                    label="医院编号"
                    name="hoscode"
                >
                    <Input />
                </Form.Item>

                <Form.Item
                    label="api基础路径"
                    name="apiUrl"
                >
                    <Input />
                </Form.Item>

                <Form.Item
                    label="联系人姓名"
                    name="contactsName"
                >
                    <Input />
                </Form.Item>

                <Form.Item
                    label="联系人电话"
                    name="contactsPhone"
                >
                    <Input />
                </Form.Item>


                <Form.Item wrapperCol={{ offset: 3 }}>
                    <Button type="primary" htmlType="submit" className={style.mr} >
                        提交
                    </Button>
                    <Button type="default" htmlType="button" onClick={addBackHandle}>
                        返回
                    </Button>
                </Form.Item>
            </Form>
        </Card>
    );
}
